<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }
    </style>
</head>
<body style="background-color: #f4f9fd;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1"><a href="myself.html"><img src="images/icon_arrow_left.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="div2">推广赚金</div>
        <div class="div3 preservation" onclick="pageJump(this)" name="myPromotion">我的推广</div>
    </div>
</header>
<!--header end-->

<!--Promotion-of-total-rewards begin -->
<article class="Promotion-of-total-rewards height-padding">
    <div class="money">
        <div>
            <p class="money-text-style">推广总数(个)</p>
            <p id="recommendCount" class="money-number-style">0 </p>
        </div>
        <div>
            <p class="money-text-style">累计奖励(金)</p>
            <p id="moneyCount" class="money-number-style">0</p>
        </div>
    </div>
</article>
<!--Promotion-of-total-rewards end -->


<!--The invited person is the user. begin-->
<article class="invited-person">
    <div>受邀人手机是用户</div>
    <div>
        <p>1.每日任务邀请好友当日做单奖励20金</p>
        <P>2.受邀人每次接受任务赚钱佣金，4个月内你可得到佣金10%作为额外奖励</P>
    </div>
</article>
<!--The invited person is the user. end-->

<!--user-certification-registration begin-->
<article class="user-certification-registration">
    <div class="put-forward-top">
        <div><p>用户</p></div>
        <div></div>
    </div>
    <div class="put-forward-top">
        <div><p>已认证</p></div>
        <div id="authenticationCount" class="person">0</div>
    </div>
    <div class="put-forward-top">
        <div><p>已注册</p></div>
        <div id="registerCount" class="person">0</div>
    </div>
</article>
<!--user-certification-registration end-->

<!--business-certification-registration begin-->
<article class="user-certification-registration business-certification-registration">
    <div class="put-forward-top">
        <div><p>商家</p></div>
        <div></div>
    </div>
    <div class="put-forward-top">
        <div><p>已发单</p></div>
        <div class="person" id="publishedShop">0</div>
    </div>
    <div class="put-forward-top">
        <div><p>已注册</p></div>
        <div class="person" id="registeredShop">0</div>
    </div>
</article>
<!--business-certification-registration end-->

<!--Promotion rankings begin-->
<article class="promotion-rankings business-certification-registration">
    <div class="put-forward-top" onclick="pageJump(this)" name="leaderBoard">
        <div><p>推广排行榜</p></div>
        <div><span>已认证用户为基准</span><img src="images/icon_arrow.png"></div>
    </div>
</article>
<!--Promotion rankings end-->


<!--Sharing friends begin-->
<section class="sharing-friends business-certification-registration">
    <div class="sharingFriendsBtn">分享给好友</div>
    <div class="container">
        <div class="layer"></div>
        <div class="content">
            <main>
                <div>
                    <img src="images/icon_wechat.png">
                    <p>微信好友</p>
                </div>
                <div>
                    <img src="images/icon_pyq.png">
                    <p>朋友圈</p>
                </div>
                <div>
                    <img src="images/icon_qq.png">
                    <p>QQ</p>
                </div>
                <div>
                    <img src="images/icon_lj.png">
                    <p>复制链接</p>
                </div>
                <div>
                    <img src="images/icon_erwm.png">
                    <p>二维码</p>
                </div>
            </main>
            <section class="cancel"> 取消</section>
        </div>
    </div>
</section>
<!--Sharing friends end-->

<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/config.js"></script>

<script type="text/javascript">
    const btnNode = document.querySelector('.sharingFriendsBtn');
    const cancel = document.querySelector('.cancel');
    const containerNode = document.querySelector('.container');
    const layerNode = document.querySelector('.layer');
    const contentNode = document.querySelector('.content');
    let startY = 0 // 记录开始滑动的坐标，用于判断滑动方向
    let status = 0 // 0：未开始，1：已开始，2：滑动中

    // 打开蒙层
    btnNode.addEventListener('click', () => {
        containerNode.style.display = 'block'
    }, false);

    cancel.addEventListener('click', () => {
        containerNode.style.display = 'none'
    }, false);

    // 蒙层部分始终阻止默认行为
    layerNode.addEventListener('touchstart', e => {
        e.preventDefault()
    }, false)

    // 核心部分
    contentNode.addEventListener('touchstart', e => {
        status = 1
        startY = e.targetTouches[0].pageY
    }, false)

    contentNode.addEventListener('touchmove', e => {
        // 判定一次就够了
        if (status !== 1) return

        status = 2

        let t = e.target || e.srcElement
        let py = e.targetTouches[0].pageY
        let ch = t.clientHeight // 内容可视高度
        let sh = t.scrollHeight // 内容滚动高度
        let st = t.scrollTop // 当前滚动高度

        // 已经到头部尽头了还要向上滑动，阻止它
        if (st === 0 && startY < py) {
            e.preventDefault()
        }

        // 已经到低部尽头了还要向下滑动，阻止它
        if ((st === sh - ch) && startY > py) {
            e.preventDefault()
        }
    }, false)

    contentNode.addEventListener('touchend', e => {
        status = 0
    }, false)


</script>
<script>
	$(document).ready(function(){
		var user = JSON.parse(localStorage.getItem('user'))
		console.log(JSON.stringify(user))
		mui.plusReady(function(){
			$.ajax({
				url:$CONFIG.baseUrl+"/api/spread/" + user.id+ "/statistics",
				type: 'get',
				beforeSend:function(x){
					x.setRequestHeader("Authorization", localStorage.getItem('token'));
				},
				success: function(data){
					if (data.data.total != null) {
						$("#recommendCount").text(data.data.total);
					}
					if (data.data.totalReward != null) {
						$("#moneyCount").text(data.data.totalReward + "金");
					}
					if (data.data.verifiedApp != null) {
						$("#authenticationCount").html(data.data.verifiedApp+"人");
					}
					if (data.data.registeredApp != null) {
						$("#registerCount").html(data.data.registeredApp + "人");
					}
					if (data.data.registeredShop != null) {
						$("#registeredShop").html(data.data.registeredShop + "人");
					}
					if (data.data.publishedShop != null) {
						$("#publishedShop").html(data.data.publishedShop + "人");
					}
				},
				errror: function(error){
					console.log('error')
				}
			})
		})
	})
	function pageJump(dom){
		var name = $(dom).attr('name')
		mui.openWindow({
			url: name+".html",
			id: name
		})
	}
	
</script>
<script src="js/vconsole.min.js"></script>
<script>
		var vConsole = new VConsole()
</script>
</body>
</html>